<template>
  <div>
    <div class="list-oneImg">
      <div class="content-left">
        <p @click="toDetail">{{title}}</p>
        <div class="left-news">
          <span>{{author}}</span>
          <i>52<span>跟帖</span></i>
        </div>
      </div>
      <img  class="list-oneimg" :src="$fixImgUrl(imgs[0].url)" @click="toDetail">
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {

    }
  },
  props: ['title', 'imgs', 'author', 'id'],
  methods: {
    toDetail(){
      this.$router.push({
        name: 'newsDetail',
        params: {
          id: this.id
        }
      })
    }
  }
}
</script>

<style  scoped>
.list-oneImg {
  display: flex;
  justify-content: space-between;
  padding: 4vw 4vw;
  border-bottom: 1px solid #e4e4e4;
}
.list-oneImg .list-oneimg {
  width: 33vw;
  height: 24vw;
  object-fit: cover;
  cursor: pointer;
}
.content-left {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  cursor: pointer;
}
.content-left p {
  font-size: 4.1vw;
  color: #333333;
  padding: 0.8vw 2vw 0 0;
  line-height: 6vw;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  padding-right: 3vw;
}
.left-news {
  padding-bottom: 1vw;
}
.left-news i {
  padding-left: 5vw;
}
</style>
